﻿﻿
<!DOCTYPE html>
<html>
<head>
	 <meta charset="utf-8">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>图片上传前的预览——plupload演示demo</title>
   <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

   
	<style>
	body{ font-size: 12px;}
	body,p,div{ padding: 0; margin: 0;}
	.wraper{ padding: 30px 0;}
	.btn-wraper{ text-align: center;}
	.btn-wraper input{ margin: 0 10px;}
	#file-list{ width: 350px; margin: 20px auto;}
	#file-list li{ margin-bottom: 10px;}
	.file-name{ line-height: 30px;}
	.progress{ height: 4px; font-size: 0; line-height: 4px; background: orange; width: 0;}
	.tip1{text-align: center; font-size:14px; padding-top:10px;}
    .tip2{text-align: center; font-size:12px; padding-top:10px; color:#b00}
    .catalogue{ position: fixed; _position:absolute; _width:200px; left: 0; top: 0; border: 1px solid #ccc;padding: 10px; background: #eee}
    .catalogue a{ line-height: 30px; color: #0c0}
    .catalogue li{ padding: 0; margin: 0; list-style: none;}
    .browse{width:120px;height:120px;line-height:120px; background:rgba(0,0,0,0.1);display: inline-block;font-size:18px;color:#999;text-align:center;}
    .browse img{max-width:120px; max-height:120px;}
    </style>
</head>
<body>
	<p class="tip1">本demo实现的图片预览功能需要浏览器支持data URL，IE8+以及其他标准浏览器都是支持的</p>
	<div class="wraper">
		
		    <div id="browse" >选择</div>
    <input ID="txtimgurl" runat="server" class="input browse yc"   />    
		
		
	</div>
    <!-- 引用js必须放在后面才能对上面按钮js起作用 -->
<script type="text/javascript" src="/skin/scripts/plupload/plupload.full.min.js"></script>
    <script type="text/javascript" src="/skin/scripts/plupload/img.js"></script>
 <script>
     $(document).ready(function() {
         plupimg();

       

     })

 </script>
</body>
</html>